<mat-card class="panel-forgot">
  <!-- <i class="icon iconfont">&#xe6c3;</i> -->
  <mat-card-title
    style="display:flex; justify-content: space-between;align-items: baseline;"
    >{{ "user.forgot.title" | translate: lang }}
  </mat-card-title>
  <mat-card-content>
    <form [formGroup]="validateForm" (ngSubmit)="onSubmit()">
      <div class="i">
        <mat-form-field>
          <input
            matInput
            #email
            type="text"
            formControlName="username"
            placeholder="{{
              'user.login.username.placeholder' | translate: lang
            }}"
          />
          <mat-error
            l10nTranslate
            *ngIf="validateForm.controls.username.hasError('required')"
          >
            user.login.username.error.require
          </mat-error>
          <mat-error
            i18n
            *ngIf="validateForm.controls.username.hasError('has')"
          >
            {{ "user.login.username.error.has" | translate: lang }}
          </mat-error>
        </mat-form-field>
      </div>
      <div class="i">
        <mat-form-field>
          <input
            matInput
            formControlName="password"
            placeholder="{{
              'user.forgot.password.placeholder' | translate: lang
            }}"
            [type]="hide ? 'password' : 'text'"
          />
          <mat-icon matSuffix (click)="hide = !hide">{{
            hide ? "visibility" : "visibility_off"
          }}</mat-icon>
          <mat-error
            *ngIf="validateForm.controls.password.hasError('required')"
          >
            {{ "user.login.password.error.require" | translate: lang }}
          </mat-error>
        </mat-form-field>
      </div>
      <div class="i confirm">
        <mat-form-field>
          <input
            placeholder="{{ 'user.forgot.confirmPwd' | translate: lang }}"
            matInput
            type="password"
            formControlName="password2"
            id="password2"
          />
          <mat-error
            *ngIf="
              validateForm.get('password2').dirty &&
              validateForm.get('password2').errors &&
              validateForm.get('password2').hasError('required')
            "
          >
            {{ "user.enroll.password.error.confirm" | translate: lang }}
          </mat-error>
          <mat-error
            *ngIf="
              validateForm.get('password2').dirty &&
              validateForm.get('password2').errors &&
              validateForm.get('password2').hasError('confirm')
            "
          >
            {{ "user.enroll.password.error.eq" | translate: lang }}
          </mat-error>
        </mat-form-field>
      </div>
      <div class="i code">
        <mat-form-field>
          <input
            matInput
            formControlName="code"
            placeholder="{{ 'user.login.code.placeholder' | translate: lang }}"
          />
          <mat-error *ngIf="validateForm.controls.code.hasError('required')">
            {{ "user.login.code.error.require" | translate: lang }}
          </mat-error>
        </mat-form-field>
        <div
          class="sendCode"
          type="button"
          mat-button
          appCode
          [aim]="validateForm.controls.username.value"
          [type]="'forgot'"
        >
          {{ "user.login.btn.send.text" | translate: lang }}
        </div>
      </div>

      <div class="i slidercode">
        <app-slider-code
          *ngIf="!isServer"
          #sliderCodeRef
          (onChangeValidate)="onChangeValidate($event)"
        ></app-slider-code>
      </div>

      <div class="i login">
        <button class="submit" mat-button [disabled]="!validateForm.valid">
          {{ "user.forgot.btn.submit.text" | translate: lang }}
        </button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
